<template>
  <view class="scroll-classify-components" :style="[wrapStyle, componentsStyle]">
    <scroll-view scroll-x show-scrollbar>
      <view class="classify-list" :style="[classifyStyle]">
        <view v-for="(item, index) in moduleData" :key="index" class="classify-item" hover-class="classify-item--hover" :style="[classifyItemStyle]" @click="handleClick(item)">
          <image class="classify-image" :style="[classifyItemImageStyle]" :src="item[imgKey]" mode=""></image>
          <text class="classify-text text-cut-1" :style="[classifyItemNameStyle]">{{ item[nameKey] }}</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
/**
 * scroll-classify 滚动分类组件
 * @description 横向滚动分类组件
 */
import mixins from "@/mixins/components.js"
export default {
  name: "scroll-classify",
  mixins: [mixins],
  props: {
    row: {
      type: Number,
      default: 2
    },
    rowSpace: {
      type: Number,
      default: 30
    },
    colSpace: {
      type: Number,
      default: 80
    },
    itemWidth: {
      type: Number,
      default: 100
    },
    imgWidth: {
      type: Number,
      default: 80
    },
    imgHeight: {
      type: Number,
      default: 80
    },
    imgRadius: {
      type: [String, Number],
      default: 100
    },
    textColor: {
      type: String,
      default: "#333333"
    },
    textSize: {
      type: [String, Number],
      default: 28
    },
    imgKey: {
      type: String,
      default: "url"
    },
    nameKey: {
      type: String,
      default: "name"
    },
    zIndex: {
      type: [String, Number],
      default: 99
    }
  },
  computed: {
    componentsStyle() {
      let style = {}
      style.zIndex = this.zIndex
      return style
    },
    classifyStyle() {
      let style = {}
      style.width = (this.moduleData.length / this.row) * (this.itemWidth + this.colSpace) + "rpx"
      return style
    },
    classifyItemStyle() {
      let style = {}
      style.width = this.itemWidth + "rpx"
      style.marginRight = this.colSpace + "rpx"
      style.marginBottom = this.rowSpace + "rpx"
      return style
    },
    classifyItemImageStyle() {
      let style = {}
      style.width = this.imgWidth + "rpx"
      style.height = this.imgHeight + "rpx"
      style.borderRadius = /[rpx]/.test(this.imgRadius) ? this.imgRadius : `${this.imgRadius}rpx`
      return style
    },
    classifyItemNameStyle() {
      let style = {}
      style.color = this.textColor
      style.fontSize = /[rpx]/.test(this.textSize) ? this.textSize : `${this.textSize}rpx`
      return style
    }
  },
  methods: {
    // 点击事件
    handleClick(item) {
      this.$emit("click", item)
    }
  }
}
</script>

<style scoped lang="scss">
.scroll-classify-components {
  padding-top: 30rpx;
  .classify-list {
    min-width: 750rpx;
    display: flex;
    flex-wrap: wrap;
    .classify-item {
      display: flex;
      overflow: hidden;
      align-items: center;
      flex-direction: column;
      &--hover {
        opacity: 0.8;
      }
      .classify-image {
      }
      .classify-text {
        margin-top: 10rpx;
      }
    }
  }
  ::-webkit-scrollbar {
    width: 0;
    height: 0;
    color: transparent;
  }
}
</style>
